import React, { FC } from "react"
import { Grid, Paper, Container, useTheme, Typography, Box, Button } from "@mui/material"
import { APP_BAR_MOBILE } from "../../layouts/DefaultLayout"
import { Link as RouterLink, useNavigate } from "react-router-dom"
import TTag from "../../components/TTag"

const Projects: FC = () => {
  const theme = useTheme()
  const navigate = useNavigate()

  const goToZmoAIProject = () => {
    navigate("/about/projects/zmoai")
  }

  return (
    <Container sx={{ paddingTop: APP_BAR_MOBILE + 20 + "px" }}>
      <Grid container spacing={3}>
        <Grid item xs={12} sm={6} md={4} lg={3}>
          <Paper>
            <Box
              sx={{
                padding: theme.spacing(4),
                display: "flex",
                flexDirection: "column",
                justifyContent: "space-between",
                alignItems: "center",
              }}
            >
              <Box
                sx={{
                  display: "flex",
                  flexDirection: "column",
                  height: "280px",
                }}
              >
                <Box
                  component="div"
                  sx={{
                    marginBottom: theme.spacing(3),
                    backgroundColor: "#583fce",
                    alignSelf: "center",
                    borderRadius: "50%",
                    display: "flex",
                    justifyContent: "center",
                    alignItems: "center",
                    color: "#fff",
                  }}
                >
                  <img src="/static/projects/zmo-logo.png" alt="" width={80} />
                </Box>
                <Typography align="left" variant="h6">
                  智能AI换衣项目
                </Typography>
                <Box>
                  <TTag title="Typescript" type="outlined" color="#274f7d" sx={{ marginRight: "4px", marginBottom: "2px" }} />
                  <TTag title="qiankun" type="outlined" color="#5e53a1" sx={{ marginRight: "4px", marginBottom: "2px" }} />
                  <TTag title="Vite" type="outlined" color="#5f6ff8" sx={{ marginRight: "4px", marginBottom: "2px" }} />
                  <TTag title="Vue3.0" type="outlined" color="#44b787" sx={{ marginRight: "4px", marginBottom: "2px" }} />
                  <TTag title="Pinia" type="outlined" color="#ffd564" sx={{ marginRight: "4px", marginBottom: "2px" }} />
                  <TTag title="Naive UI" type="outlined" color="#37a96f" sx={{ marginRight: "4px", marginBottom: "2px" }} />
                  <TTag title="Bootstrap" type="outlined" color="#7655ae" sx={{ marginRight: "4px", marginBottom: "2px" }} />
                  <TTag title="i18n" type="outlined" color="#5baca5" sx={{ marginRight: "4px", marginBottom: "2px" }} />
                </Box>
                <Typography gutterBottom align="left" variant="body2" sx={{ marginTop: theme.spacing(1), marginBottom: theme.spacing(1) }}>
                  用户上传衣服图片, 通过算法生成衣服的模特效果图
                </Typography>
              </Box>

              <Button variant="outlined" component={RouterLink} to="/about/projects/zmoai">
                查看项目
              </Button>
            </Box>
          </Paper>
        </Grid>

        <Grid item xs={12} sm={6} md={4} lg={3}>
          <Paper>
            <Box
              sx={{
                padding: theme.spacing(4),
                display: "flex",
                flexDirection: "column",
                justifyContent: "space-between",
                alignItems: "center",
              }}
            >
              <Box
                sx={{
                  display: "flex",
                  flexDirection: "column",
                  height: "280px",
                }}
              >
                <Box
                  component="div"
                  height={80}
                  width={80}
                  sx={{
                    marginBottom: theme.spacing(3),
                    alignSelf: "center",
                    borderRadius: "50%",
                    display: "flex",
                    justifyContent: "center",
                    alignItems: "center",
                    color: "#fff",
                  }}
                >
                  <img src="/static/projects/bftc-logo1.png" alt="" width={80} />
                </Box>
                <Typography gutterBottom align="left" variant="h6">
                  帮服同城(用户版)
                </Typography>

                <Box>
                  <TTag title="Typescript" type="outlined" color="#274f7d" sx={{ marginRight: "4px", marginBottom: "2px" }} />
                  <TTag title="微信小程序" type="outlined" color="#30a04f" sx={{ marginRight: "4px", marginBottom: "2px" }} />
                  <TTag title="uni-app" type="outlined" color="#309845" sx={{ marginRight: "4px", marginBottom: "2px" }} />
                  <TTag title="Vuex" type="outlined" color="#44b787" sx={{ marginRight: "4px", marginBottom: "2px" }} />
                  <TTag title="Color UI" type="outlined" color="#9966e1" sx={{ marginRight: "4px", marginBottom: "2px" }} />
                </Box>

                <Typography gutterBottom align="left" variant="body2" sx={{ marginTop: theme.spacing(1), marginBottom: theme.spacing(1) }}>
                  便民生活服务平台, 用户可以发布服务需求, 可以查看附近商家, 让服务随叫及到
                </Typography>
              </Box>

              <Button variant="outlined" component={RouterLink} to="#">
                查看项目
              </Button>
            </Box>
          </Paper>
        </Grid>

        <Grid item xs={12} sm={6} md={4} lg={3}>
          <Paper>
            <Box
              sx={{
                padding: theme.spacing(4),
                display: "flex",
                flexDirection: "column",
                justifyContent: "space-between",
                alignItems: "center",
              }}
            >
              <Box
                sx={{
                  display: "flex",
                  flexDirection: "column",
                  height: "280px",
                }}
              >
                <Box
                  component="div"
                  height={80}
                  width={80}
                  sx={{
                    marginBottom: theme.spacing(3),
                    alignSelf: "center",
                    borderRadius: "50%",
                    display: "flex",
                    justifyContent: "center",
                    alignItems: "center",
                    color: "#fff",
                  }}
                >
                  <img src="/static/projects/bftc-logo2.png" alt="" width={80} />
                </Box>
                <Typography gutterBottom align="left" variant="h6">
                  帮服同城(商家版)
                </Typography>

                <Box>
                  <TTag title="Taro" type="outlined" color="#0013bb" sx={{ marginRight: "4px", marginBottom: "2px" }} />
                  <TTag title="腾讯即时通讯sdk" type="outlined" color="#1a48d6" sx={{ marginRight: "4px", marginBottom: "2px" }} />
                  <TTag title="React" type="outlined" color="#60daf8" sx={{ marginRight: "4px", marginBottom: "2px" }} />
                  <TTag title="Redux" type="outlined" color="#7d51c2" sx={{ marginRight: "4px", marginBottom: "2px" }} />
                  <TTag title="Redux-Thunk" type="outlined" color="#7d51c2" sx={{ marginRight: "4px", marginBottom: "2px" }} />
                  <TTag title="Redux-Toolkit" type="outlined" color="#744db7" sx={{ marginRight: "4px", marginBottom: "2px" }} />
                </Box>

                <Typography gutterBottom align="left" variant="body2" sx={{ marginTop: theme.spacing(1), marginBottom: theme.spacing(1) }}>
                  实时监听公共订单, 实时聊天, 路径规划与导航
                </Typography>
              </Box>

              <Button variant="outlined" component={RouterLink} to="#">
                查看项目
              </Button>
            </Box>
          </Paper>
        </Grid>

        <Grid item xs={12} sm={6} md={4} lg={3}>
          <Paper>
            <Box
              sx={{
                padding: theme.spacing(4),
                display: "flex",
                flexDirection: "column",
                justifyContent: "space-between",
                alignItems: "center",
              }}
            >
              <Box
                sx={{
                  display: "flex",
                  flexDirection: "column",
                  height: "280px",
                }}
              >
                <Box
                  component="div"
                  height={80}
                  width={80}
                  sx={{
                    marginBottom: theme.spacing(3),
                    backgroundColor: "#326de4",
                    alignSelf: "center",
                    borderRadius: "50%",
                    display: "flex",
                    justifyContent: "center",
                    alignItems: "center",
                    color: "#fff",
                  }}
                >
                  <Typography gutterBottom variant="h2" sx={{ lineHeight: 1 }}>
                    B
                  </Typography>
                </Box>
                <Typography gutterBottom align="left" variant="h6">
                  帮服科技管理后台
                </Typography>

                <Box>
                  <TTag title="Element UI" type="outlined" color="#3a9ff9" sx={{ marginRight: "4px", marginBottom: "2px" }} />
                  <TTag title="Vue Router" type="outlined" color="#44b787" sx={{ marginRight: "4px", marginBottom: "2px" }} />
                  <TTag title="AXIOS" type="outlined" color="#6329d8" sx={{ marginRight: "4px", marginBottom: "2px" }} />
                  <TTag title="Webpack" type="outlined" color="#1479bc" sx={{ marginRight: "4px", marginBottom: "2px" }} />
                  <TTag title="MockJS" type="outlined" color="#36986a" sx={{ marginRight: "4px", marginBottom: "2px" }} />
                </Box>

                <Typography gutterBottom align="left" variant="body2" sx={{ marginTop: theme.spacing(1), marginBottom: theme.spacing(1) }}>
                  中台管理系统, 用于内容维护, 平台运营
                </Typography>
              </Box>

              <Button variant="outlined" component={RouterLink} to="#">
                查看项目
              </Button>
            </Box>
          </Paper>
        </Grid>

        <Grid item xs={12} sm={6} md={4} lg={3}>
          <Paper>
            <Box
              sx={{
                padding: theme.spacing(4),
                display: "flex",
                flexDirection: "column",
                justifyContent: "space-between",
                alignItems: "center",
              }}
            >
              <Box
                sx={{
                  display: "flex",
                  flexDirection: "column",
                  height: "280px",
                }}
              >
                <Box
                  component="div"
                  height={80}
                  width={80}
                  sx={{
                    marginBottom: theme.spacing(3),
                    backgroundColor: "#000",
                    alignSelf: "center",
                    borderRadius: "50%",
                    display: "flex",
                    justifyContent: "center",
                    alignItems: "center",
                    color: "#fff",
                    overflow: "hidden",
                  }}
                >
                  <img src="/static/projects/lcyz.webp" alt="" width={80} />
                </Box>
                <Typography gutterBottom align="left" variant="h6">
                  乐创驿站
                </Typography>

                <Box>
                  <TTag title="SNAPKIT" type="outlined" color="#008cbb" sx={{ marginRight: "4px", marginBottom: "2px" }} />
                  <TTag title="AFNetworking" type="outlined" sx={{ marginRight: "4px", marginBottom: "2px" }} />
                  <TTag title="Swift" type="outlined" color="#f05540" sx={{ marginRight: "4px", marginBottom: "2px" }} />
                  <TTag title="Objective-c" type="outlined" color="#0081f0" sx={{ marginRight: "4px", marginBottom: "2px" }} />
                  <TTag title="ios" type="outlined" color="#1d1d1d" sx={{ marginRight: "4px", marginBottom: "2px" }} />
                  <TTag title="YYModel" type="outlined" color="#fea61c" sx={{ marginRight: "4px", marginBottom: "2px" }} />
                </Box>

                <Typography gutterBottom align="left" variant="body2" sx={{ marginTop: theme.spacing(1), marginBottom: theme.spacing(1) }}>
                  以创业教育为主导的直播平台, 为创业者赋能, 让创业变得更加简单
                </Typography>
              </Box>

              <Button variant="outlined" component={RouterLink} to="#">
                查看项目
              </Button>
            </Box>
          </Paper>
        </Grid>

        <Grid item xs={12} sm={6} md={4} lg={3}>
          <Paper>
            <Box
              sx={{
                padding: theme.spacing(4),
                display: "flex",
                flexDirection: "column",
                justifyContent: "space-between",
                alignItems: "center",
              }}
            >
              <Box
                sx={{
                  display: "flex",
                  flexDirection: "column",
                  height: "280px",
                }}
              >
                <Box
                  component="div"
                  height={80}
                  width={80}
                  sx={{
                    marginBottom: theme.spacing(3),
                    backgroundColor: "#fff",
                    border: "4px solid #2758f1",
                    alignSelf: "center",
                    borderRadius: "50%",
                    display: "flex",
                    justifyContent: "center",
                    alignItems: "center",
                    color: "#fff",
                  }}
                >
                  <img src="/static/projects/ccx-log.png" alt="" width={40} />
                </Box>
                <Typography gutterBottom align="left" variant="h6">
                  车车侠
                </Typography>

                <Box>
                  <TTag title="微信小程序" type="outlined" color="#30a04f" sx={{ marginRight: "4px", marginBottom: "2px" }} />
                  <TTag title="canvas" type="outlined" color="#5e53a1" sx={{ marginRight: "4px", marginBottom: "2px" }} />
                  <TTag title="MINA" type="outlined" color="#30a04f" sx={{ marginRight: "4px", marginBottom: "2px" }} />
                  <TTag title="腾讯地图sdk" type="outlined" color="#0067f7" sx={{ marginRight: "4px", marginBottom: "2px" }} />
                </Box>

                <Typography
                  gutterBottom
                  align="left"
                  variant="body2"
                  sx={{
                    marginTop: theme.spacing(1),
                    marginBottom: theme.spacing(1),
                    textDecoration: "line-through",
                  }}
                >
                  一个汽车服务平台, 为线下39家门店提供拓客渠道, 服务预约, 流程管理与监控(已下线)
                </Typography>
              </Box>

              <Button variant="outlined" disabled component={RouterLink} to="#">
                查看项目
              </Button>
            </Box>
          </Paper>
        </Grid>
      </Grid>
    </Container>
  )
}

export default Projects
